<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="author" content="wangbo">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D效果</title>
  <style>
    body{
      /* 模拟人眼要屏幕的距离是100px */
      perspective: 100px;
    }
    div{
      margin: 100px auto;
      width: 100px;
      height: 100px;
      background-color: red;
      transition: 2s linear;
      /* 并没有用放大的效果, */
    }
    div:hover{
      
      /* z轴 设置的越大,说明离眼睛越近,图像就该越大 
      如果z轴越接近perspective 的值,图像就越大
      */
      transform: translateZ(20px)
    }
  </style>
</head>
<body>
  <!-- 
  3D的特点,近大远小
  遮挡面不可见
  二维坐标系,x轴,y轴,
  三维坐标系,x轴,y轴,z轴
  想要网页实现3D效果,需要透视(视距),
  3d物体投射到2维平面上(美术生,将水杯化成画)
  模仿人类视距的位置,就类似眼睛去看一样
  透视也叫视距,人额眼睛到屏幕的距离
  距离眼睛越近,看到的物体就越大
  -->
  <div>
    3d效果
  </div>
</body>
</html>